<template>
    <Center>
        <div class="p-10">
            <div class="text-center text-3xl mt-1 text-gray-800" style="letter-spacing: 0.2em;">视频推荐</div>
            <div class="mt-5 flex justify-center">
                <div class="flex flex-row text-gray-500" style="width:800px;">
                    <div class="text-center basis-1/5 pointer" v-for="(item, index) in tagList">{{ item.name }}</div>
                </div>
            </div>
            <div class="mt-3">
                <RCascader :viewNum="1" width="1120px" height="300px" v-if="swiperList.length > 0" :interval="3000"
                    :autoplay="true" :height="height" type="card" arrow="always" @change="changeHandle">
                    <RCarouselItem v-for="(item, index) in swiperList" :key="index">
                        <div style="padding: 20px; height: 100%;">
                            <el-image :src="baseUrl + item.image" style="width:100%;height:100%;" />
                        </div>
                    </RCarouselItem>
                </RCascader>
            </div>
            <div class="mt-5 text-2xl font-bold">
                <el-space :size="30">
                    <span class=" text-blue-500" @click="selNewHotSong(1)">精彩推荐</span>
                    <span class="text-gray-500" @click="selNewHotSong(2)">热门推荐</span>
                </el-space>
            </div>
            <el-row class="mt-5" style="height:260px;">
                <el-col :span="8" class="pr-10" v-for="(item, index) in hotVideoList" :key="index">
                    <el-image :src="baseUrl + item.image" class="rounded pointer" style="width:100%;height:260px;" />
                </el-col>
            </el-row>
        </div>
        <div class="p-4">
            <div class="pl-4">
                <el-radio-group>
                    <el-radio-button label="全部" />
                    <el-radio-button label="内地" />
                    <el-radio-button label="欧美" />
                    <el-radio-button label="香港" />
                    <el-radio-button label="其他" />
                </el-radio-group>
            </div>
            <div class="mt-3 pl-4">
                <el-radio-group>
                    <el-radio-button label="全部" />
                    <el-radio-button label="最新" />
                    <el-radio-button label="最热" />
                </el-radio-group>
            </div>
            <div class="mt-1">
                <el-row>
                    <el-col :span="6" class="p-4" v-for="(item, index) in getTabVideoListInfo.data" :key="index">
                        <el-image :src="baseUrl + item.image" class="rounded" style="width:100%;height:160px;" />
                        <div class="mt-2">{{ item.title }}</div>
                        <div class="mt-1 flex">
                            <el-space class="text-gray-500 text-sm">
                                <el-image :src="baseUrl + item.user?.avatar" class="rounded-full"
                                    style="width:30px;height:30px;" />
                                {{ item.user?.name }}
                            </el-space>
                        </div>
                        <div class="mt-1 flex">
                            <el-space class="text-gray-500 text-sm">
                                <el-icon :size="18">
                                    <VideoCamera />
                                </el-icon>
                                <span>{{ item.views }}</span>
                                <span>{{ item.create_time }}</span>
                            </el-space>
                        </div>
                    </el-col>

                </el-row>
            </div>
        </div>
    </Center>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import "rh-carousel/lib/style.css";
import Center from '../../components/common/Center.vue'
import { VideoCamera } from '@element-plus/icons-vue'
import { RCascader, RCarouselItem } from "rh-carousel";
import { tagIndex, slideIndex, videoIndex } from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
const baseUrl = import.meta.env.VITE_API_URL;
const tagList = ref([]);
const swiperList = ref([]);
const hotVideoList = ref([]);
const getTabVideoListInfo = ref([]);
onMounted(() => {
    getTagList();
    getSwiper();
    getHotVideoList()
    getTabVideoList();
});

const getTabVideoList = async () => {
    const { data } = await videoIndex({
        limit: 30,
    });
    getTabVideoListInfo.value = data.video
}
const getHotVideoList = async () => {
    const { data } = await videoIndex({
        position: 1,
        limit: 3,
    });
    hotVideoList.value = data.video.data;
    console.log(hotVideoList);
};
const selNewHotSong = async (e) => {
    const { data } = await videoIndex({
        position: e,
        limit: 3,
    });
    hotVideoList.value = data.video.data;
}

const getSwiper = async () => {
    const { data } = await slideIndex({
        position: 2,
    });
    swiperList.value = data.slide;
    console.log(swiperList);
};
const getTagList = async () => {
    const { data } = await tagIndex({
    });
    tagList.value = data.tag;
};
</script>
<style scoped>
.container {
    width: 1440px;
}
</style>